import { useState, useEffect } from 'react';
import { Box, TextField, IconButton, Typography, Link, Divider } from '@mui/material';
import LoadingButton from '@mui/lab/LoadingButton';
import InputAdornment from '@mui/material/InputAdornment';
import { useRouter } from 'src/routes/hooks';
import { Iconify } from 'src/components/iconify';
import './auth.css';
import { MessageBox } from '../../components/Snackbar/message-box';
import { forgetPassword } from '../../api/user-api';

export function ForgetPasswdView() {
  const router = useRouter();

  const [showPassword, setShowPassword] = useState(false);
  const [password, setPassword] = useState('');
  const [account, setAccount] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const [severity, setSeverity] = useState<'success' | 'error' | 'info' | 'warning'>('success');

  const [showMessage, setShowMessage] = useState(false);
  const [message, setMessage] = useState('');

  const onClose = () => {
    setShowMessage(false);
  };


  const handleUpPassWord = () => {
    const params = {
      account,
      password,
    };
    forgetPassword(params).then((res) => {
      if (res.code ===1000) {
        setSeverity('success');
        setShowMessage(true);
        setMessage("密码修改成功")
        setTimeout(()=>{
          router.push("/sign-in")

        },1000)
      }
      else {
        setError(res.data)
      }
    });
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
    }
  };

  return (
    <>
      <div>
        <Box display="flex" justifyContent="center" alignItems="center" height="60vh">
          <div className="auth-container">
            <div className="auth-box">
              <Box
                gap={1.5}
                display="flex"
                flexDirection="column"
                alignItems="center"
                sx={{ mb: 5 }}
              >
                <Typography variant="h5">修改密码</Typography>
              </Box>
              <Box display="flex" flexDirection="column" alignItems="flex-end">
                {/* account Field */}
                <TextField
                  fullWidth
                  name="account"
                  value={account}
                  label="帐号"
                  onChange={(e) => setAccount(e.target.value)}
                  InputLabelProps={{ shrink: true }}
                  sx={{ mb: 3 }}
                  error={!!error} // 显示错误样式
                  onKeyDown={handleKeyDown} // 监听 Enter 键
                />

                {/* Password Field */}
                <TextField
                  fullWidth
                  name="password"
                  label="新密码"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  InputLabelProps={{ shrink: true }}
                  type={showPassword ? 'text' : 'password'}
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="end">
                        <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
                          <Iconify
                            icon={showPassword ? 'solar:eye-bold' : 'solar:eye-closed-bold'}
                          />
                        </IconButton>
                      </InputAdornment>
                    ),
                  }}
                  sx={{ mb: 3 }}
                  error={!!error} // 显示错误样式
                  onKeyDown={handleKeyDown} // 监听 Enter 键
                />
                {error && (
                  <Typography variant="body2" color="error" sx={{ mb: 2 }}>
                    {error}
                  </Typography>
                )}
                <Link variant="body2" color="inherit" sx={{ mb: 1.5 }} onClick={()=>router.push('/sign-in')}>
                  返回登陆
                </Link>
                <LoadingButton
                  fullWidth
                  size="large"
                  type="button"
                  color="inherit"
                  variant="contained"
                  onClick={handleUpPassWord}
                  loading={loading}
                >
                  修改密码
                </LoadingButton>
              </Box>

              {/*<Divider sx={{ my: 3, '&::before, &::after': { borderTopStyle: 'dashed' } }}>*/}
              {/*  <Typography*/}
              {/*    variant="overline"*/}
              {/*    sx={{ color: 'text.secondary', fontWeight: 'fontWeightMedium' }}*/}
              {/*  >*/}
              {/*    OR*/}
              {/*  </Typography>*/}
              {/*</Divider>*/}

              {/*<Box gap={1} display="flex" justifyContent="center">*/}
              {/*  /!* Social Media Sign-in Icons *!/*/}
              {/*  <IconButton color="inherit">*/}
              {/*    <Iconify icon="logos:google-icon" />*/}
              {/*  </IconButton>*/}
              {/*  <IconButton color="inherit">*/}
              {/*    <Iconify icon="eva:github-fill" />*/}
              {/*  </IconButton>*/}
              {/*  <IconButton color="inherit">*/}
              {/*    <Iconify icon="ri:twitter-x-fill" />*/}
              {/*  </IconButton>*/}
              {/*</Box>*/}
            </div>
          </div>
        </Box>
      </div>
      <MessageBox
        message={message}
        showMessage={showMessage}
        onClose={onClose}
        severity={severity}
      />
    </>
  );
}
